<template>
	
	<view class="content">
		<scroll-view scroll-y class="left-aside">
			<view v-for="(item,index) in categoryList" :key="item.cid" class="f-item b-b"
				:class="{active: item.cid === currentCategory['cid']}" @click="tabtap(item,index)">
				{{item.category}}
			</view>
		</scroll-view>
		<scroll-view scroll-with-animation scroll-y class="right-aside tn-flex tn-flex-direction-column" @scroll="asideScroll">
			
			<view v-for="(item, index) in goodsList.list" :key="item.goodsId" v-if="goodsList.list" 
				@click="navToDetailPage(item.goodsId)"
				 class="tn-flex tn-flex-direction-row tn-margin-right tn-margin-bottom" style="background-color: white;">
				<view class="tn-flex-1">
					<view class="tn-margin-right tn-margin-top-md">
					<image :src="item.thumbs[0]" mode="aspectFill" style="width: 220rpx; height: 220rpx; border-radius: 16rpx;"></image>
					</view>
				</view>
				<view class="tn-flex-2 tn-flex tn-flex-direction-column tn-flex-col-between">
					<text class="tn-flex-2 tn-padding-right-sm tn-padding-top" style="font-size: 1.2em;">{{item.name}}</text>
					<view class="tn-flex-1">
						<text style="color: red;">￥</text>
						<text style="font-size: 1.5em; color: red; font-weight: bold;">
							{{item.discountPrice && item.discountPrice > 0 ? item.discountPrice : item.price}}
						</text>
					</view>
				</view>
			</view>
			<view v-else>
				没有更多商品了
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '../../common/api.js'
	export default {
		data() {
			return {
				categoryList: [], // 分类列表
				currentCategory: {}, // 当前分类
				goodsList: {}, // 分类商品列表,
				currentPage: 1,
				pageSize: 20, // 分页
				hasMore: false,
			}
		},
		onLoad() {
			// this.loadData();
			this.loadCategoryList()
		},
		methods: {
			loadCategoryList() {
				// 获取分类列表
				let _this = this;
				this.$Net.req({
					url: this.$API.fetchCategoryList(),
					method: "get",
					data: {},
					dataType: 'json',
					success: function(result, status) {
						_this.categoryList = result;
						_this.reloadCategoryGoods(result[0])
					},
				});
			},
			reloadCategoryGoods(category) {
				// 重新加载分类
				this.currentCategory = category;
				this.currentPage = 1;
				this.hasMore = true;
				this.loadCategoryGoods(true);
			},
			loadCategoryGoods(refresh) {
				// 分类商品列表查询
				if (this.currentCategory && this.currentCategory['cid']) {
					let _this = this;
					this.$Net.req({
						url: this.$API.fetchCategoryGoods(),
						method: "get",
						data: {
							page: this.currentPage,
							size: this.pageSize,
							cid: this.currentCategory['cid']
						},
						dataType: 'json',
						success: function(result, status) {
							if (result.end) {
								_this.hasMore = false;
							}
							_this.currentPage = result.next;
							if (refresh) {
								_this.goodsList = result;
							} else {
								let old = _this.goodsList.list;
								old.concat(result.list);
								result.list = old;
								_this.goodsList = result;
							}

							console.log('列表:', _this.goodsList);
						},
					});
				}
			},

			//一级分类点击
			tabtap(item, index) {
				console.log('点击了', item, index);
				this.reloadCategoryGoods(item);
			},
			//右侧栏滚动
			asideScroll(e) {},
			//计算右侧栏每个tab的高度等信息
			calcSize() {},
			//详情页
			navToDetailPage(id) {
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`
				})
			},
		}
	}
</script>

<style lang='scss'>
	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
	}

	.content {
		display: flex;
	}

	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		height: 100%;
		background-color: #fff;
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;

		&.active {
			color: $base-color;
			background: #f8f8f8;

			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside{
		flex: 1;
		overflow: hidden;
		padding-left: 20upx;
	}
	
	.ll {
		flex-shrink: 0;
		width: 300upx;
		height: 320rpx;
	}
	
	.s-item{
		display: flex;
		align-items: center;
		height: 70upx;
		padding-top: 8upx;
		font-size: 28upx;
		color: $font-color-dark;
	}
	.t-list{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;
		&:after{
			content: '';
			flex: 99;
			height: 0;
		}
	}
	.t-item{
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 176upx;
		font-size: 26upx;
		color: #666;
		padding-bottom: 20upx;
		
		image{
			width: 140upx;
			height: 140upx;
		}
	}
</style>